<template>
    <div>
        <div>
            <f-table
                id="logLists"
                ref="tableRef"
                row-key="id"
                :fetch="fetch"
                :columns="columns"
                :scroll="{ x: 'max-content' }"
                :row-selection="{
                    selectedRowKeys,
                    onChange: handleCheck,
                    getCheckboxProps,
                    preserveSelectedRowKeys: true,
                }"
                :resize-scroll-gap="16 + 1 + 24"
            >
                <template #higherSearchStatic="{ model }">
                    <a-row :gutter="32">
                        <a-col :span="8">
                            <a-form-item name="usename">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">用户名</span>
                                    <a-input
                                        v-model:value="model.username"
                                        placeholder="请输入用户名"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item name="api">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">操作API</span>
                                    <a-input
                                        v-model:value="model.api"
                                        placeholder="请选择操作API"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item name="ip">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">操作IP</span>
                                    <a-input
                                        v-model:value="model.ip"
                                        placeholder="请输入操作IP"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </template>
                <template #higherSearchExpandable="{ model }">
                    <a-row :gutter="32">
                        <a-col :span="8">
                            <a-form-item name="methods">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">操作方法</span>
                                    <a-input
                                        v-model:value="model.methods"
                                        placeholder="请选择操作方法"
                                        allow-clear
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item name="methods">
                                <div class="higher-search-item">
                                    <span class="higher-search-item-label">操作时间</span>
                                    <a-range-picker
                                        v-model="rangeTime"
                                        style="width: 600px"
                                        show-time
                                        format="YYYY-MM-DD HH:mm:ss"
                                        :placeholder="['开始时间', '结束时间']"
                                        @change="updateTimeChange"
                                    />
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </template>
                <template #toolbar>
                    <span v-if="selectedRows.length > 0">
                        已选择
                        <span class="number-background">{{ selectedRows.length }}</span>
                        项
                    </span>
                </template>
            </f-table>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

import { message } from 'ant-design-vue';
import { omit } from 'lodash-es';

import service from '@/service';

const tableRef = ref(null);

const selectedRowKeys = computed(() => selectedRows.value.map((row) => row.username));
let selectedRows = ref([]);
const handleCheck = (_, rows) => {
    selectedRows.value = rows;
};
const getCheckboxProps = (row) => {
    return {
        disabled: row.username,
    };
};

const username = ref('');

watch(username, () => {});

// 查询时间
const rangeTime = ref(null);
const startTime = ref('');
const endTime = ref('');
const updateTimeChange = (value, dateString) => {
    startTime.value = dateString[0];
    endTime.value = dateString[1];
};

const columns = [
    {
        title: '用户名',
        dataIndex: 'username',
        width: 250,
    },
    {
        title: '操作API',
        dataIndex: 'api',
        width: 250,
    },
    {
        title: '操作方法',
        dataIndex: 'methods',
        width: 250,
    },
    {
        title: '操作状态码',
        dataIndex: 'status',
        width: 200,
    },
    {
        title: '操作时间',
        dataIndex: 'time',
        width: 250,
    },

    {
        title: '操作IP',
        dataIndex: 'ip',
        width: 250,
    },
    {
        title: '操作body',
        dataIndex: 'body',
        width: 250,
    },
    {
        title: '操作query',
        dataIndex: 'query',
    },
];
const fetch = async (params) => {
    try {
        const res = await service.get('/log', {
            ...omit(params, ['page', 'pageSize']),
            offset: (params.page - 1) * params.pageSize,
            limit: params.pageSize,
            startTime: startTime.value,
            endTime: endTime.value,
        });

        return Promise.resolve({
            dataSource: res.data,
            total: res.total,
        });
    } catch (error) {
        message.error(error);
    }
};
</script>

<style scoped>
.homeborder {
    position: fixed;
    width: 94%;
    height: 100%;
    margin-left: 1%;
    background-size: 100% 100%;
}

.tcontents {
    width: 94%;
}
</style>
